<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>

<h4>Vue表达式</h4>
<div id="myApp">
{{message}}<br>
{{html}}<br>
<!-- 绑定HTML -->
<div v-html="html"></div><br>
<span v-bind:class="{'className':onOff}">hello world！</span><br>
{{2*9}}<br>
<!-- 拆分字符串 -->
{{hello.split('')}}<br>
<!-- 反转字符串 -->
{{hello.split('').reverse().join('')}}<br>
<!-- 三目运算符 -->
{{onOff ? "yes" : "no"}}
<!-- 组装类名 -->
<div v-bind:id="'list-'+id">不错</div>
</div>
<script type="text/javascript">
var myApp = new Vue({
	el:"#myApp",
	data:{
		hello:'hello',
		message:'你好！',
		html:"<h3>HTML代码</h3>",
		onOff:false,
		id:2
	}
});
</script>

</body>
</html>